import { computed, onMounted, onUnmounted, ref } from "vue";
import { useConfig } from "@/stores/datav/useConfig";
import { ComputedRef } from "@vue/reactivity";
import {
  IRect,
  IScreenStyle,
  IUseScreen,
} from "@/components/viewEditor/editor/hooks/types";
import { IConfigStore } from "@/stores/datav/types";

/**
 * 编辑屏幕hook
 */
export function useScreen(): IUseScreen {
  const config: IConfigStore = useConfig();
  const screenStyle: ComputedRef<IScreenStyle> = computed((): IScreenStyle => {
    return {
      width: config.canvasConfig.width + "px",
      height: config.canvasConfig.height + "px",
      background: `${config.canvasConfig.backgroundColor} url('${config.canvasConfig.backgroundImage}')`,
      transform: `scale(${config.canvasConfig.scale},${config.canvasConfig.scale})`,
    };
  });

  // 点击选中屏幕设置
  const canvasClick = (e: MouseEvent) => {
    if ((e.target as HTMLDivElement).className === "screen") {
      oper.value.contentMenu = false;
      config.currentIndex = "";
      if (config.checkedList.length) {
        config.checkedList = [];
      }
    }
  };
  // 屏幕区域选中
  const selectArea = (rect: IRect) => {
    const ids: string[] = [];
    Object.keys(config.config).forEach((key: string) => {
      if (
        rect.startLeft <= config.config[key].location.x &&
        rect.endLeft >= config.config[key].location.x &&
        rect.startTop <= config.config[key].location.y &&
        rect.endTop >= config.config[key].location.y
      ) {
        ids.push(key);
      }
    });
    config.checkedList = ids;
  };

  const oper = ref<{
    contentMenuX: number;
    // 菜单的top坐标
    contentMenuY: number;
    // 菜单的显示状态
    contentMenu: boolean;
    id: string;
  }>({ contentMenuX: 0, contentMenuY: 0, contentMenu: false, id: "" });

  const openOperation = (operConfig: {
    contentMenuX: number;
    // 菜单的top坐标
    contentMenuY: number;
    // 菜单的显示状态
    contentMenu: boolean;
    id: string;
  }) => {
    oper.value = operConfig;
  };

  return {
    screenStyle,
    canvasClick,
    selectArea,
    openOperation,
    oper,
  };
}

/**
 * 注册 window上挂载 上下左右 键盘操作 组件移动
 */
export function useKeyMoveComponent(): void {
  const config = useConfig();

  // /**
  //  * 键盘上下左右按下后移动组件
  //  * @param e
  //  */
  // function keyMove(e: KeyboardEvent) {
  //   if (
  //     e.code === "ArrowUp" ||
  //     e.code === "ArrowRight" ||
  //     e.code === "ArrowDown" ||
  //     e.code === "ArrowLeft"
  //   ) {
  //     e.preventDefault();
  //   }
  //   if (config.currentIndex) {
  //     switch (e.code) {
  //       case "ArrowUp":
  //         if (config.config[config.currentIndex].location.y > 0) {
  //           config.config[config.currentIndex].location.y--;
  //         }
  //         break;
  //       case "ArrowRight":
  //         if (
  //           config.canvasConfig.width -
  //             config.config[config.currentIndex].location.width >
  //           config.config[config.currentIndex].location.x
  //         ) {
  //           config.config[config.currentIndex].location.x++;
  //         }
  //         break;
  //       case "ArrowDown":
  //         if (
  //           config.canvasConfig.height -
  //             config.config[config.currentIndex].location.height >
  //           config.config[config.currentIndex].location.y
  //         ) {
  //           config.config[config.currentIndex].location.y++;
  //         }
  //         break;
  //       case "ArrowLeft":
  //         if (config.config[config.currentIndex].location.x > 0) {
  //           config.config[config.currentIndex].location.x--;
  //         }
  //         break;
  //     }
  //   }
  // }
  //
  // // window注册键盘按下或者松开的事件
  // onMounted(() => {
  //   window.addEventListener("keydown", keyMove);
  // });

  // onUnmounted(() => {
  //   window.removeEventListener("keydown", keyMove);
  // });
}
